<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
    <title>登录_社优保</title>
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/index/css/admin.css?at={:date('md')}">
	<link rel="stylesheet" href="__ROOT__/static/index/css/animate.min.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/layui-admin.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/login.css?at={:date('md')}">
	
   
    <!-- <link rel="stylesheet" href="__ROOT__/static/index/css/console.css?at={:date('md')}"> -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/icon/iconfont.css?at={:date('md')}">
</head>
<body>
<div class="main">
	<div class="main_con" data-tab="account">


		<div class="login-box-new">
			<div class="login-tab" >
				<a class="on" data-tab="account">账号登录</a>
				<a data-tab="code">验证码登录</a>
			</div>
			<div class="login-title-text">
				<p>欢迎来到社优保</p>
				<p>Welcome  To  sheyoubao </p>
			</div>

			<form data-login-form onsubmit="return false"   onkeydown="if(event.keyCode==13)return false;" method="post" class="layui-anim layui-anim-upbit" autocomplete="off">
				<div data-tab="account" class="form-box">
					<ul>
						<li>
							<input class="layui-input" required pattern="^\S{4,}$" name="username"  autocomplete="off" placeholder="请输入账号">

							<i class="iconfont iconiconzh1"></i>
						</li>
						<li>
							<input class="layui-input" required pattern="^\S{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="请输入密码">
							<i class="iconfont iconmima"></i>

							<span class="isDisplay">
							<i class="iconfont iconClose"></i>
							<i class="iconfont iconchakanyanjingshishifenxi2" style="display: none;"></i>
						</span>
						</li>
						<li >
							<span  class="forget-pwd"><a  href="{:url('index/login/forgetpw')}" style="margin-right: 5px;">忘记密码</a></span>

						</li>

<!--						<li class="text-center padding-top-20 login_btn">-->
<!--							<input type="hidden" name="skey" required  value="{$loginskey|default=''}" >-->
<!--							<button style="margin-top: 0;" type="submit" class="layui-btn  layui-disabled full-width" data-form-loaded="登录">登录中</button>-->
<!--						</li>-->

					</ul>
				</div>


				<div data-tab="code" class="form-box">
					<ul>
						<li class="mobile">

							<input type="text"  name="mobile" disabled  class="layui-input mobile"  id="phone"  value="" placeholder="请输入手机号">
							<i class="iconfont iconshouji"></i>

						</li>
						<li class="verify">

							<i class="iconfont iconyanzhengma1"></i>
							<input type="text" name="verify" disabled placeholder="请输入验证码" pattern="^\d{4}$"
								   error-msg="请输入正确的验证码"
								   autocomplete="off" class="layui-input">
							<span class="get-code-btn">获取验证码</span>

						</li>
						<li >
							<span  class="forget-pwd"><a  href="{:url('index/login/forgetpw')}" style="margin-right: 5px;">忘记密码</a></span>

						</li>


					</ul>
				</div>
				<ul>
					<li class="text-center padding-top-20 login_btn">
						<input type="hidden" name="skey" required  value="{$loginskey|default=''}" >
						<button style="margin-top: 0;" type="submit" class="layui-btn  layui-disabled full-width" data-form-loaded="登录">登录中</button>
					</li>
				</ul>
				<div class="go-register">
					<a class="forget-" href="{:url('index/login/register')}"><text>还没有账号？</text>立即注册</a>

				</div>
			</form>

			<div class="img-bottom">
				<img src="__ROOT__/static/index/img/login-bg-bottom.png" alt="">

			</div>


		</div>
	</div>

</div>



<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script src="__ROOT__/static/plugs/require/require.js"></script>
<script src="__ROOT__/static/index/admin.js"></script>
<script>
	$(document).ready(function(){
		$(".isDisplay").on("click","i",function(){
			$(this).hide().siblings().show();
			if($("[name='password'][type='password']").length){
				$("[name='password'][type='password']").attr("type","text")
			}else{
				$("[name='password'][type='text']").attr("type","password")
			}		
		})
		$(".forget-pw").on("click",function(){
			$.msg.alert("请联系客服：0311-85289358","忘记密码","tips")
		})
		$(".login-tab a").on("click",function(){
			var currentTab = $(this).attr('data-tab')
			console.log(currentTab)
			$(this).addClass('on').siblings().removeClass('on')
			$(".main_con").attr("data-tab",currentTab)

			if(currentTab == "account"){

				// 切换为用户名登录
				$(".form-box[data-tab='account']").find('input').attr("required","required").removeAttr("disabled").val("")
				$(".form-box[data-tab='code']").find('input').attr("disabled","disabled").removeAttr("required").val("")

			}else{
				$(".form-box[data-tab='code']").find('input').attr("required","required").removeAttr("disabled").val("")
				$(".form-box[data-tab='account']").find('input').attr("disabled","disabled").removeAttr("required").val("")
			}

		})

		
		$(".layui-btn").on('keydown', 'li', function(e) {
			if(e.keyCode == 13) {
				e.preventDefault()
			}
		})
		document.onkeydown = function (e) { // 回车提交表单
		// 兼容FF和IE和Opera
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {

				$(".layui-btn").click();
			}
		}


		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".get-code-btn").on("click",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":2
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									// code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	})

</script>
<style>
	.login-title{
		background-image: url('__ROOT__/static/index/img/login-title2.png');
	}
	.explain_info a{
		display: inline-block;
		float: inherit;
	}
	.main_con form .form-box{
		display: none;
	}
	.main_con[data-tab="account"] form .form-box[data-tab="account"] {
		display: block;
	}
	.main_con[data-tab="code"] form .form-box[data-tab="code"] {
		display: block;
	}
</style>
</body>
</html>
